<template>
  <div>
    <el-form class="pad-t-15 form-diy">
      <el-form-item label="辅助空白" label-width="80px" class="none-mar-b">
        <div class="flex font-12 pad-r-30 pad-b-15">
          <el-input v-model="details.space" min="0" type="number" class="input-bar-4" placeholder="请输入辅助空白值"/>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>

</style>

<script>
import elDragDialog from '@/directive/el-dragDialog'

export default {
  components: {},
  directives: {
    // 拖动窗口
    elDragDialog
  },
  props: {
    details1: {
      type: Object,
      default: null
    },
    eventId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      details: {
        detailsId: '',
        templateId: '',
        sortNo: 0,
        authorType: 0,
        pictureId: '',
        textId: '',
        upperLowerMargins: 0,
        sideMargin: 0,
        backColor: '',
        content: '',
        textSize: '',
        textShape: '',
        textAlign: '',
        textColor: '',
        imgUrl: '',
        imgWidth: '',
        imgHeight: '',
        space: 0
      }
    }
  },
  // 初始化页面
  created() {
    this.resetDetails()
    this.details = this.details1
    const that = this
    this.$bus.$on('resetDetailsSpace' + this.eventId, function(details) {
      that.details = details
    })
    this.$bus.$emit('spaceFormData' + this.eventId, this.form)
  },
  'form'(val) {
    this.form = val
  },
  methods: {
    resetDetails() {
      this.details = {
        detailsId: '',
        templateId: '',
        sortNo: 0,
        authorType: 0,
        pictureId: '',
        textId: '',
        upperLowerMargins: 0,
        sideMargin: 0,
        backColor: '',
        content: '',
        textSize: '',
        textShape: '',
        textAlign: '',
        textColor: '',
        imgUrl: '',
        imgWidth: '',
        imgHeight: '',
        space: 0
      }
    }
  }
}
</script>